<template>

    <el-form :inline="true" size="small">
        <el-form-item label="状态">
            <el-select v-model="query.lstatus" style="width:100px;" @change="getPage(1)">
                <el-option label="全部" value="" />
                <el-option v-for="(name, status) in statusMap" :label="name" :value="status" />
            </el-select>
        </el-form-item>
        <el-form-item label="编号">
            <el-input v-model="query.lid" />
        </el-form-item>
        <el-form-item label="申请人">
            <el-input v-model="query.ename" />
        </el-form-item>
        <el-form-item label="事由">
            <el-input v-model="query.lcause" />
        </el-form-item>

        <el-form-item>
            <el-button :icon="Search" type="primary" @click="getPage(1)">查询</el-button>
        </el-form-item>

    </el-form>

    <oa-table :page="page" :query="query" :getPage="getPage">
        <el-table :data="page.list">
            <el-table-column prop="lid" label="编号" width="70" />
            <el-table-column prop="dname" label="部门" width="100" />
            <el-table-column prop="ename" label="申请人" width="100" />
            <el-table-column label="起止时间" width="280">
                <template #default="{ row }">
                    {{ row.lstart }} ~ {{ row.lend }}
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100">
                <template #default="{row}">
                    <el-tag :type="getTagType(row.type)" effect="dark">
                        {{ getTypeLabel(row.type) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="lcause" label="详情" width="120">
                <template #default="{row}">
                    <span 
                        @dblclick="showFullDetail(row)"
                        :title="row.lcause.length > 10 ? '双击查看全部' : ''"
                        style="cursor: pointer;"
                    >
                        {{ row.lcause.length > 10 ? row.lcause.substring(0, 10) + '...' : row.lcause }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="lsubmitDate" label="提交时间" width="180" />

            <el-table-column label="审批意见" width="180">
                <template #default="{ row }">
                    <span v-if="row.lspAdvice?.length <= 20">{{ row.lspAdvice }}</span>
                    <span v-else-if="!row.lspAdvice?.length"></span>
                    <span v-else>
                        <el-popover effect="dark" placement="top-start" :width="400" :content="row.lspadvice"
                            trigger="hover">
                            <template #reference>
                                {{ row.lspAdvice?.slice(0, 20) }}...
                            </template>
                        </el-popover>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="lspr" label="审批人" width="180" />
            <el-table-column prop="lbackdate" label="销假时间" width="180" />

            <el-table-column prop="lstatusname" label="状态" width="70" fixed="right" />

            <el-table-column label="操作" width="130" fixed="right">
                <template #default="{ row }">                    
                        
                    <el-tooltip v-if="row.lstatus === 1" content="审批" effect="light">
                        <el-button @click="lExamRef.open(row)" :icon="CircleCheck" type="danger" size="small"
                            circle></el-button>
                    </el-tooltip>  
                    <el-tooltip v-else content="详情" effect="light">
                        <el-button @click="lExamRef.open(row)" :icon="Document" type="danger" size="small"
                            circle></el-button>
                    </el-tooltip>                  

                </template>
            </el-table-column>
        </el-table>
    </oa-table>

    <l-exam ref="lExamRef" @ok="getPage(1)"></l-exam>

</template>

<script setup>
import { ref, reactive } from 'vue'
import req from '@/request'
import OaTable from '@/components/OaTable.vue'
import {   Search, CircleCheck, Document} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';


const statusMap = {
    0: '未提交',
    1: '已提交',
    2: '已驳回',
    3: '已批准',
    4: '已销假'
};

const query = reactive({
    pageNum: 1,
    pageSize: 5,
    lid: '',
    ename:'',
    lcause: '',
    lstatus: ''
});

// 获取类型标签
const getTypeLabel = (type) => {
    const option = TypeOptions.find(item => item.value === type);
    return option ? option.label : '未知';
}

const TypeOptions = [
  { value: 1, label: '请假' },
  { value: 2, label: '工作汇报' },
  { value: 3, label: '出差' }
]

// 根据类型返回不同的tag样式
const getTagType = (type) => {
    const types = {
        1: 'primary',   // 请假 - 蓝色
        2: 'success',   // 工作汇报 - 绿色
        3: 'warning'    // 出差 - 黄色
    };
    return types[type] || 'info';  // 默认灰色
}

//双击详情展示全部
const showFullDetail = (row) => {
    ElMessageBox.alert(row.lcause, '详情内容', {
        confirmButtonText: '关闭',
        customClass: 'detail-message-box'
    });
}

const page = ref({
    total: 0,
    list: []
});

const getPage = async (pageNo = 1) => {
    query.pageNum = pageNo;
    const res = await req.get("/leave/exam", { params: query });
    page.value = res.data;

    //使用获取的分页数据相关值覆盖 query.pageNum  和 query.pageSize
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
}

getPage(1);

//审批
import LExam from './LExam.vue';
const lExamRef = ref(null);



</script>

<style scoped>
	/* 详情弹窗样式 */
	:deep(.detail-message-box) {
	    width: 80%;
	    max-width: 800px;
	}
	:deep(.detail-message-box .el-message-box__content) {
	    white-space: pre-wrap;
	    word-break: break-all;
	    max-height: 60vh;
	    overflow-y: auto;
	}
</style>